<template>
<div class="flex-1 h-[300px]">
    <div class="h-[100px] text-right text-center py-10 px-5 leading-20">
        <el-popover placement="bottom" title="" ref="popoverRef" trigger="click">
            <div slot="">
                <el-upload
                        class="avatar-uploader"
                        action=""
                        drag
                        accept=".xlsx"
                        :before-upload="beforeAvatarUpload"
                        :http-request="httpRequest"
                        :show-file-list="false">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">
                        <el-link icon="el-icon-download" type="primary" download="安防视频设备导入模板.xlsx" href="/template/安防视频设备导入模板.xlsx">安防视频设备导入模板</el-link>
                    </div>
                </el-upload>
            </div>
            <el-button class="ed-button ed_black-bottom" @click="synchronizate" ><svg-icon icon-class="synchronizate"/>批量导入</el-button>
        </el-popover>
        <el-button class="ed-button ed_black-bottom " @click="addeviceList"><svg-icon icon-class="add-svg"/>新增设备</el-button>
    </div>
    <ApiTable :api="api.queryDeviceList" ref="table" :params="queryDeviceForm">
        <el-table-column type="index" width="80" label="序号"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="queryDeviceForm.name" label="设备名称"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="queryDeviceForm.deviceId" label="设备序列号"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="操作">
            <template slot-scope="scope">
                <el-button class="ed-table-bottom ed_black_border" @click="edit(scope.row)">编辑</el-button>
                <el-button class="ed-table-bottom ed_blue_border" @click="deleteDevice(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </ApiTable>
    <EdDialog ref="deviceDialogRef" v-if="data.showGateConfigure" :title="data.isUpdate ? '编辑设备' : '新增设备'" @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form :model="deviceForm"  ref="ruleForm" label-position='right' label-width="auto">
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="设备名称:" prop="name" :rules="validate.validates({required:true,msg:'请输入'})" >
                            <el-input v-model="deviceForm.name" placeholder="请输入"  maxlength="20" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="设备序列号:" prop="deviceId" :rules="validate.validates({required:true,msg:'请输入'})" >
                            <el-input v-model="deviceForm.deviceId" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="ip地址:" prop="ipAddress" :rules="validate.validates({required:true,msg:'请输入'})" >
                            <el-input v-model="deviceForm.ipAddress" placeholder="请输入" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="端口号:" prop="portNumber">
                            <el-input v-model="deviceForm.portNumber" placeholder="请输入" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="设备登录账号" prop="account">
                            <el-input v-model="deviceForm.account" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="设备登录密码" prop="password">
                            <el-input v-model="deviceForm.password" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
    </EdDialog>
    <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
</div>
</template>
<script setup lang="ts">
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import ApiTable from 'src/components/ApiTable.vue'
    import EdDialog from 'src/components/EdDialog.vue'
    import * as api from '../../../api'  
    import message from 'src/utils/once-message'
    import * as validate from 'src/utils/validate'
    import router from 'src/router'
    import store from 'src/store'
    import { onActivated, onDeactivated, nextTick, ref, reactive } from 'vue'
    
    const configQueryForm= reactive({
        orgId: store.getters.vid,
        villageId: router.currentRoute.query.villageId,
        deviceDevType: 8,
        name:'',
        deviceId:''
    })
    const deviceForm = reactive({
        name:'',
        deviceId:'',
        ipAddress:'',
        portNumber:'',
        account:'',
        password:''
    })        
      // 门禁系统配置回显请求参数
    const queryDeviceForm = reactive({
        name: '',
        deviceId: '',
        orgId: store.getters.vid,
        villageId: router.currentRoute.query.villageId,
        deviceDevType: 8
    })
    const table = ref()
    const deviceDialogRef = ref()
    const confirmDeleteRef = ref()
    const popoverRef = ref()
    const data = reactive({
        dialogVisible:false,
        errorDdialogVisible:false,
        isUpdate:false,
        showGateConfigure:false,
        confirmRow:''
    })
    onActivated(() => {
        if (router.currentRoute.query.villageId) {
            queryDeviceForm.villageId = router.currentRoute.query.villageId
            refreshDeviceList()
        }
        nextTick(() => {
            table.value.load()
        })
    })
    onDeactivated(()=>{

    })
    // 列表数据
    function refreshDeviceList() {
           api.queryDeviceList(queryDeviceForm).then(response => {
                if (response.success) {

                }
            })
        }
    function synchronizate() {
        // 调同步的接口
        api.synchronizate({ villageId: router.currentRoute.query.villageId }).then(response => {
            if (response.success) {
                data.dialogVisible = true,
                table.value.load()
            } else {
                data.errorDdialogVisible = true
                table.value.load()
            }
        })
    }
    function addeviceList(){
        data.showGateConfigure = true
    }
    function closeDialog(){
        data.showGateConfigure = false
        // deviceDialogRef.value.resetFields()
    }
    function saveDialog(){

    }
    function edit(row){
        data.isUpdate = false
        data.showGateConfigure = true
    }
    function deleteDevice(row){
        data.confirmRow = row.id;
        confirmDeleteRef.value.open("操作确认","是否执行此操作？","warning")
    }
    function confirmDeleteTrue(){
       api. delMerchant({id: data.confirmRow}).then(response => {
            if(response.success) {
                message.success({
                    message: '门禁设备删除成功！',
                    duration: 2000,
                    center:true
                });
               table.value.load(1)
            }
        })
    }
     // 视频配置导入
     function beforeAvatarUpload(file){
        const fileType = file.name.split('.');
        const fileDate = fileType.slice(-1);
        if (['xlsx'].indexOf(fileDate[0]) < 0) {
            message.error('仅支持文件格式：.xlsx');
            return false
        }
        const isLt2M = file.size / 1024 / 1024 < 30;
        if (!isLt2M) {
            message.error('上传文件大小不能超过 30MB!');
        }
        if(isLt2M){
            upFile = new FormData();
            upFile.append("file",file)
            upFile.append("villageId", router.currentRoute.query.villageId);
            upFile.append("villageName", router.currentRoute.query.villageName);
            upFile.append("orgId",store.getters.vid);
            upFile.append("orgName",store.getters.orgName)
        }
        return isLt2M;
    }
    function httpRequest(){
        api.batchImport(upFile).then(response => {
            if(response.code == 20000) {
                message.success({
                    message: '导入成功！',
                    duration: 2000,
                    center:true
                });
                table.value.load(1)
            }
            popoverRef.value.doClose()
        }).catch(()=>{
            popoverRef.value.doClose()
        })
    }
    </script>

<style scoped>
    
</style>